﻿<%@ Page Language="C#" AutoEventWireup="false" MasterPageFile="~/modules/MobilePack/Mobile.Master"
    CodeBehind="MapListing.aspx.cs" Inherits="EPiServer.Labs.MobilePack.Templates.Location.MapListing" %>

<%@ Register TagPrefix="EPiServer" Namespace="EPiServer.Web.WebControls" Assembly="EPiServer.Web.WebControls" %>
    <%@ register tagprefix="EPiServer" namespace="EPiServer.Web.WebControls" assembly="EPiServer" %>
    <asp:Content ContentPlaceHolderID="BodyContents" runat="server">
        <div data-role="page" id="gmap-<%= CurrentPage.PageLink.ID %>" class="mobilePage"
            data-theme='<%= GetSiteData()["PageTheme"] %>'>
            <div data-role="header" data-theme='<%= GetSiteData()["PageTheme"] %>'>
                <h1>
                    <%= CurrentPage["Header"] ?? CurrentPage["PageName"] %></h1>
                <a href='<%= GetSiteData().LinkURL %>' data-icon="home" data-iconpos="notext" data-direction="reverse"
                    class="ui-btn-left jqm-home">Home</a>
            </div>
            <div data-role="content">
                <script type="text/javascript">

            $('#gmap-<%= CurrentPage.PageLink.ID %>').live("pageshow", function () {
                $('#map_canvas_<%= CurrentPage.PageLink.ID %>').gmap(
                {'center': getLatLng(), 'zoom': <%= ZoomLevel %>, 'callback': function() {<%= Positions %>} });
            });
             function getLatLng() 
             {    
                return new google.maps.LatLng(<%= StartPosition %>);
             }
         
             function getUserLocation(){
                        // Try W3C Geolocation (Preferred)                   
                  if(navigator.geolocation) {
              
                    navigator.geolocation.getCurrentPosition(function(position) {
                   
                       var location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                  
                       $('#map_canvas_<%= CurrentPage.PageLink.ID %>').gmap('getMap').panTo(location);
                       $('#map_canvas_<%= CurrentPage.PageLink.ID %>').gmap('getMap').setZoom(<%= ZoomLevel %>+2);
                    });
            
                  }
              }
            </script>
            <EPiServer:Property PropertyName="MainBody" runat="server" />
            <EPiServer:Pagelist runat="server" id="pagelist">
                <headertemplate>
                    <ul data-role="listview"  data-inset="true">
                </headertemplate>
                <itemtemplate>
                    <li>
                        <EPiServer:Property PropertyName="PageLink" runat="server" />
                    </li>
                </itemtemplate>
                <footertemplate>
                    </ul>
                </footertemplate>
            </EPiServer:Pagelist>
            <a onclick="getUserLocation(); return false;" data-role="button">Use My Location</a>
            <div id="map_canvas_<%= CurrentPage.PageLink.ID %>" class="mobilepack-map">
            </div>
        </div>
    </div>
</asp:Content>
